[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Amazon color scheme - light theme with signature yellow and orange */ --background: oklch(1 0 0); /* White */ --foreground: oklch(0.145 0 0); /* Dark text #0F1111 */ --card: oklch(1 0 0); /* White cards */ --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); /* Amazon dark navy header #131921 */ --primary: oklch(0.145 0.015 240); /* Dark navy blue */ --primary-foreground: oklch(1 0 0); /* White text */ /* Amazon yellow for buttons #FFD814 */ --secondary: oklch(0.92 0.15 95); /* Amazon yellow */ --secondary-foreground: oklch(0.145 0 0); /* Dark text on yellow */ /* Light gray backgrounds #F3F3F3 */ --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.45 0 0); /* Amazon orange accent #FF9900 */ --accent: oklch(0.75 0.18 55); /* Amazon orange */ --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); /* Borders and inputs */ --border: oklch(0.88 0 0); /* Light gray borders */ --input: oklch(0.88 0 0); --ring: oklch(0.75 0.18 55); /* Orange ring */ /* Amazon teal-blue for links #007185 */ --chart-1: oklch(0.5 0.12 220); --chart-2: oklch(0.75 0.18 55); /* Orange */ --chart-3: oklch(0.92 0.15 95); /* Yellow */ --chart-4: oklch(0.5 0.12 220); /* Teal */ --chart-5: oklch(0.145 0.015 240); /* Navy */ --radius: 0.375rem; /* Smaller radius like Amazon */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.145 0.015 240); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.145 0 0); --sidebar-border: oklch(0.88 0 0); --sidebar-ring: oklch(0.75 0.18 55); } .dark { /* Keep dark mode similar to light for consistency */ --background: oklch(0.98 0 0); /* Very light gray instead of pure white */ --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0.015 240); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.92 0.15 95); --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.75 0.18 55); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.88 0 0); --input: oklch(0.88 0 0); --ring: oklch(0.75 0.18 55); --chart-1: oklch(0.5 0.12 220); --chart-2: oklch(0.75 0.18 55); --chart-3: oklch(0.92 0.15 95); --chart-4: oklch(0.5 0.12 220); --chart-5: oklch(0.145 0.015 240); --sidebar: oklch(0.145 0.015 240); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.92 0.15 95); --sidebar-primary-foreground: oklch(0.145 0 0); --sidebar-accent: oklch(0.75 0.18 55); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.75 0.18 55); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]png:file="public/winter-parka.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/winter-parka-2g0Me7eOy9l5CvnYE9ZFq1bkbtDRMc.png" isMerged="true" [V0_FILE]png:file="public/cozy-winter-boots.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cozy-winter-boots-CAzfqqtPqi4t8eoIcCc683ojIRXPqj.png" isMerged="true" [V0_FILE]png:file="public/winter-jacket.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/winter-jacket-EplMPC5hKlbRchXE7abGqaKZIjRJOg.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isQuickEdit="true" isMerged="true" "use client" import type * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { cn } from "@/lib/utils" function XIcon({ className }: { className?: string }) { return ( ) } function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ai-checkout-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useMemo } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Sparkles, CheckCircle, AlertTriangle, TrendingDown, Package } from "@/components/icons" import { useStore } from "@/lib/store-context" import { useRouter } from "next/navigation" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" export function AICheckoutDialog({ children, total, missionId, }: { children: React.ReactNode; total: number; missionId?: string }) { const [open, setOpen] = useState(false) const [processing, setProcessing] = useState(false) const [completed, setCompleted] = useState(false) const { placeOrder, missions, cart } = useStore() const router = useRouter() const insights = useMemo(() => { const mission = missionId ? missions.find((m) => m.id === missionId) : null const budgetRemaining = mission ? mission.budget - mission.spent - total : 0 const budgetPercentage = mission ? ((mission.spent + total) / mission.budget) * 100 : 0 const isOverBudget = budgetPercentage > 100 const isNearBudget = budgetPercentage > 85 && budgetPercentage <= 100 // Simulate coupon detection const hasCoupon = Math.random() > 0.5 const couponSavings = hasCoupon ? total * 0.15 : 0 // Check if close to free shipping threshold const freeShippingThreshold = 35 const needsForFreeShipping = freeShippingThreshold - total const closeToFreeShipping = needsForFreeShipping > 0 && needsForFreeShipping < 15 // Simulate price drop detection const hasPriceDrop = cart.some((item) => item.originalPrice && item.originalPrice > item.price) return { mission, budgetRemaining, budgetPercentage, isOverBudget, isNearBudget, hasCoupon, couponSavings, closeToFreeShipping, needsForFreeShipping, hasPriceDrop, } }, [missionId, missions, cart, total]) const handleAICheckout = async () => { setProcessing(true) // Simulate AI processing await new Promise((resolve) => setTimeout(resolve, 2000)) placeOrder(missionId, "ai_assisted") setProcessing(false) setCompleted(true) // Redirect to orders page after successful checkout setTimeout(() => { setOpen(false) setCompleted(false) router.push("/orders") }, 2000) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Sparkles, TrendingUp, Zap } from "@/components/icons" export default function HomePage() { return (

{/* Amazon-style Header */}

amazon .ca

Hello, saurav Account & Lists Returns & Orders Cart

{/* Navigation Bar */} {/* Hero Banner */}

Prime Big Deal Days is here!

Exclusive deals for Prime members

{/* ShopMate Promotional Card - Main Entry Point */}

NEW AI-Powered

Introducing ShopMate - Your AI Shopping Assistant

Create shopping missions and let our AI agent find the best deals for you. Perfect for Canadian shoppers with smart filters for Prime, provinces, and bilingual support.

AI-Powered Search

Smart Recommendations

Budget Tracking

Example Mission:

Winter Essentials 2025

3 products found

Prime eligible

Under budget

{/* Product Sections */}

{/* Deal Card 1 */}

Deals you might like in Beauty & Personal Care

20% off

30% off

{/* Deal Card 2 */}

Keep shopping for

Stereo headphones

2 viewed

Unlocked cell phone

4 viewed

{/* Deal Card 3 */}

Deals you might like in Fashion

21% off

12% off

{/* Deal Card 4 */}

Deals inspired by your recent history

42% off

31% off

{/* Floating ShopMate Button */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Roboto_Mono } from "next/font/google" import "./globals.css" import { StoreProvider } from "@/lib/store-context" import { Suspense } from "react" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap", }) const robotoMono = Roboto_Mono({ subsets: ["latin"], variable: "--font-mono", display: "swap", }) export const metadata: Metadata = { title: "Amazon.ca Shopping Agent", description: "AI-powered shopping assistant for Amazon.ca", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...

}> {children} ) } [V0_FILE]typescriptreact:file="components/mission-dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { MissionCard } from "@/components/mission-card" import { ProductRecommendations } from "@/components/product-recommendations" import { useStore } from "@/lib/store-context" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function MissionDashboard() { const { missions, selectedMissionId } = useStore() const [activeTab, setActiveTab] = useState("active") const activeMissions = missions.filter((m) => m.status !== "completed") const completedMissions = missions.filter((m) => m.status === "completed") return (

Active Missions {activeMissions.length} History {completedMissions.length}

{activeMissions.length > 0 ? ( activeMissions.map((mission) => ) ) : (

No active missions. Create one to get started!

)}

{completedMissions.length > 0 ? ( completedMissions.map((mission) => ) ) : (

No completed missions yet.

)}

) } [V0_FILE]typescriptreact:file="app/orders/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Header } from "@/components/header" import { useStore } from "@/lib/store-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Sparkles, Bot } from "@/components/icons" import Image from "next/image" import Link from "next/link" export default function OrdersPage() { const { orders } = useStore() return (

{/* Breadcrumb */}

Your Account › Your Orders

{/* Page Title */}

Your Orders

{/* Search Bar */}

{/* Tabs */}

{/* Filter */}

{orders.length} orders placed in{" "}

{/* Orders List */}

{orders.map((order) => (

{/* Order Header */}

ORDER PLACED

{order.orderDate}

TOTAL

${order.total.toFixed(2)}

SHIP TO

{order.shipTo} ▼

{order.purchaseType === "ai_assisted" && ( AI-Assisted Purchase )} {order.purchaseType === "auto_purchase" && ( Auto-Purchase )}

ORDER # {order.orderNumber}

View order details

{/* Order Body */}

{order.deliveryStatus}

{order.deliveryDate &&

{order.deliveryDate}

} {order.missionTitle && (

Ordered through mission:{" "} {order.missionTitle}

)}

{/* Order Items */}

{order.items.map((item) => (

{item.name}

))}

{/* Action Buttons */}

))}

) } [V0_FILE]typescriptreact:file="components/cart-drawer.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { useStore } from "@/lib/store-context" import { Trash, Minus, Plus, Sparkles } from "@/components/icons" import { Separator } from "@/components/ui/separator" import { AICheckoutDialog } from "@/components/ai-checkout-dialog" import { useRouter } from "next/navigation" export function CartDrawer({ children }: { children: React.ReactNode }) { const { cart, removeFromCart, updateQuantity, selectedMissionId, placeOrder } = useStore() const [open, setOpen] = useState(false) const router = useRouter() const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) const tax = subtotal * 0.13 // 13% HST for Ontario const total = subtotal + tax const handleCheckout = () => { placeOrder() setOpen(false) router.push("/orders") } return ( {children} Shopping Cart {cart.length === 0 ? (

Your cart is empty

Add items from your mission recommendations

) : (

{cart.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

))}

Subtotal ${subtotal.toFixed(2)}

Tax (HST 13%) ${tax.toFixed(2)}

Total ${total.toFixed(2)}

)} ) } [V0_FILE]png:file="public/omega-3-fish-oil.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/omega-3-fish-oil-UbRJSDKtPiREuCw7G6JTFzkvqxD6OK.png" isMerged="true" [V0_FILE]jpg:file="public/resveratrol-supplement-bottle-blue.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/resveratrol-supplement-bottle-blue-epuAdkkobDM6IINiekDKF70TQwQZ7y.jpg" isMerged="true" [V0_FILE]jpg:file="public/collagen-powder-container-pink.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collagen-powder-container-pink-ZZ0YdXHT4jDn3i37XSAOHiqHkodXpA.jpg" isMerged="true" [V0_FILE]jpg:file="public/ergonomic-office-chair-black.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ergonomic-office-chair-black-9QEbDmFWyYSFDPAGwdUswCbV6zg964.jpg" isMerged="true" [V0_FILE]jpg:file="public/wireless-keyboard-mouse-combo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-keyboard-mouse-combo-8E4AwWY1xqoumFhDOwik0lPbf6YWK8.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/notifications-dropdown.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Bell, TrendingDown, Zap, Sparkles } from "@/components/icons" import { useStore } from "@/lib/store-context" import { ScrollArea } from "@/components/ui/scroll-area" export function NotificationsDropdown() { const { notifications, markNotificationRead, dismissNotification } = useStore() const unreadCount = notifications.filter((n) => !n.read).length const getIcon = (type: string) => { switch (type) { case "price_drop": return case "deal_alert": return case "mission_suggestion": return default: return } } return ( Notifications {unreadCount > 0 && ( {unreadCount} new )} {notifications.length === 0 ? (

No notifications

) : ( notifications.map((notification) => ( markNotificationRead(notification.id)} >

{getIcon(notification.type)}

{notification.title}

{notification.message}

{notification.timestamp}

{!notification.read &&

}

{notification.actionLabel && ( )} )) )} ) } [V0_FILE]typescriptreact:file="components/suggested-missions.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { useStore } from "@/lib/store-context" import { Sparkles } from "@/components/icons" export function SuggestedMissions() { const { suggestedMissions, createMissionFromSuggestion } = useStore() if (suggestedMissions.length === 0) return null return (

Suggested Missions

AI Powered

Based on your shopping history and seasonal trends

{suggestedMissions.map((suggestion) => (

{suggestion.icon}

${suggestion.budget} budget

{suggestion.title} {suggestion.description}

{suggestion.reason}

{suggestion.filters.primeOnly && ( Prime Only )} {suggestion.filters.minRating}+ Stars {suggestion.filters.canadianSeller && ( 🍁 CA Sellers )}

))}

) } [V0_FILE]typescriptreact:file="components/price-tracking-card.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { TrendingDown } from "@/components/icons" import { useStore } from "@/lib/store-context" export function PriceTrackingCard() { const { priceAlerts } = useStore() if (priceAlerts.length === 0) return null return (

Price Tracking Active

Monitoring {priceAlerts.length} product(s) for price drops {priceAlerts.map((alert) => (

{alert.productName}

Target: ${alert.targetPrice} • Current: ${alert.currentPrice}

Below Target!

))} ) } [V0_FILE]typescriptreact:file="app/shop-agent/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { MissionDashboard } from "@/components/mission-dashboard" import { CreateMissionDialog } from "@/components/create-mission-dialog" import { SuggestedMissions } from "@/components/suggested-missions" import { PriceTrackingCard } from "@/components/price-tracking-card" import { PendingPurchases } from "@/components/pending-purchases" export default function ShopAgentPage() { return (

Your Shopping Missions

AI-powered agents helping you shop smarter on Amazon.ca

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Settings, User, ShoppingCart } from "@/components/icons" import Link from "next/link" import { CartDrawer } from "@/components/cart-drawer" import { NotificationsDropdown } from "@/components/notifications-dropdown" import { useStore } from "@/lib/store-context" import { Badge } from "@/components/ui/badge" export function Header() { const { cart } = useStore() const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0) return (

ShopMate

) } [V0_FILE]typescriptreact:file="components/create-mission-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { Plus, Sparkles, CheckCircle } from "@/components/icons" import { useStore } from "@/lib/store-context" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" type ConversationStep = "template" | "goal" | "filters" | "autoPurchase" | "location" | "language" | "confirm" interface FilterOption { id: string label: string description: string enabled: boolean } interface MissionTemplate { id: string title: string description: string icon: string goal: string filters: string[] budget: number } const templates: MissionTemplate[] = [ { id: "winter", title: "Winter Essentials", description: "Cold weather gear and accessories", icon: "❄️", goal: "Winter boots, jackets, and cold weather accessories", filters: ["prime", "rating", "inStock"], budget: 500, }, { id: "tech", title: "Tech Upgrades", description: "Latest gadgets and electronics", icon: "💻", goal: "Laptops, tablets, and tech accessories", filters: ["prime", "rating", "canadian"], budget: 1500, }, { id: "home", title: "Home Office", description: "Productive workspace essentials", icon: "🏠", goal: "Desk, chair, monitor, and office supplies", filters: ["prime", "rating", "inStock"], budget: 1200, }, { id: "gifts", title: "Gift Shopping", description: "Perfect presents for loved ones", icon: "🎁", goal: "Thoughtful gifts for family and friends", filters: ["prime", "deals"], budget: 300, }, { id: "fitness", title: "Fitness & Wellness", description: "Health and exercise equipment", icon: "💪", goal: "Workout equipment, yoga mats, and fitness accessories", filters: ["prime", "rating", "inStock"], budget: 400, }, { id: "custom", title: "Custom Mission", description: "Start from scratch", icon: "✨", goal: "", filters: [], budget: 0, }, ] export function CreateMissionDialog() { const [open, setOpen] = useState(false) const { addMission } = useStore() const [step, setStep] = useState("template") const [selectedTemplate, setSelectedTemplate] = useState(null) const [missionGoal, setMissionGoal] = useState("") const [inputValue, setInputValue] = useState("") const [filters, setFilters] = useState([ { id: "prime", label: "Prime Only", description: "Free fast shipping", enabled: true }, { id: "rating", label: "4+ Stars", description: "Highly rated items", enabled: true }, { id: "canadian", label: "Canadian Sellers", description: "Support local", enabled: false }, { id: "deals", label: "Deals & Discounts", description: "Save money", enabled: false }, { id: "inStock", label: "In Stock", description: "Available now", enabled: true }, { id: "priceTracking", label: "Price Tracking", description: "Set alerts on specific items", enabled: false }, ]) const [autoPurchaseEnabled, setAutoPurchaseEnabled] = useState(false) const [autoPurchaseSettings, setAutoPurchaseSettings] = useState({ maxPricePerItem: "", minRating: "4.0", minReviews: "50", requirePrime: true, dailyLimit: "", }) const [selectedProvince, setSelectedProvince] = useState("Ontario") const [selectedLanguage, setSelectedLanguage] = useState("English") const [budget, setBudget] = useState("") const provinces = [ "Ontario", "Quebec", "British Columbia", "Alberta", "Manitoba", "Saskatchewan", "Nova Scotia", "New Brunswick", "Newfoundland and Labrador", "Prince Edward Island", "Northwest Territories", "Nunavut", "Yukon", ] const languages = ["English", "Français", "Bilingual (EN/FR)"] const toggleFilter = (id: string) => { setFilters((prev) => prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f))) } const handleTemplateSelect = (template: MissionTemplate) => { setSelectedTemplate(template) if (template.id === "custom") { setStep("goal") } else { setMissionGoal(template.goal) setBudget(template.budget.toString()) setFilters((prev) => prev.map((f) => ({ ...f, enabled: template.filters.includes(f.id), })), ) setStep("filters") } } const handleNext = () => { if (step === "goal" && inputValue.trim()) { setMissionGoal(inputValue) setInputValue("") setStep("filters") } else if (step === "filters") { if (budget || selectedTemplate?.budget) { setStep("autoPurchase") } else { setStep("location") } } else if (step === "autoPurchase") { setStep("location") } else if (step === "location") { setStep("language") } else if (step === "language") { setStep("confirm") } } const handleCreateMission = () => { addMission({ title: selectedTemplate && selectedTemplate.id !== "custom" ? selectedTemplate.title : missionGoal, description: `AI-powered search for ${missionGoal}`, status: "active", progress: 0, itemsFound: 0, budget: Number(budget) || 0, spent: 0, priceTracking: filters.find((f) => f.id === "priceTracking")?.enabled || false, autoPurchase: autoPurchaseEnabled ? { enabled: true, maxPricePerItem: Number(autoPurchaseSettings.maxPricePerItem) || 0, minRating: Number(autoPurchaseSettings.minRating), minReviews: Number(autoPurchaseSettings.minReviews), requirePrime: autoPurchaseSettings.requirePrime, dailyLimit: Number(autoPurchaseSettings.dailyLimit) || 0, } : undefined, preferences: { province: selectedProvince, language: selectedLanguage, primeOnly: filters.find((f) => f.id === "prime")?.enabled || false, }, }) setStep("template") setSelectedTemplate(null) setMissionGoal("") setInputValue("") setBudget("") setAutoPurchaseEnabled(false) setOpen(false) } const resetDialog = () => { setStep("template") setSelectedTemplate(null) setMissionGoal("") setInputValue("") setBudget("") setAutoPurchaseEnabled(false) setOpen(false) } return ( ) } [V0_FILE]typescriptreact:file="components/set-price-alert-dialog.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Bell } from "@/components/icons" import { useStore, type Product } from "@/lib/store-context" import { useToast } from "@/hooks/use-toast" interface SetPriceAlertDialogProps { product: Product children: React.ReactNode } export function SetPriceAlertDialog({ product, children }: SetPriceAlertDialogProps) { const [open, setOpen] = useState(false) const [targetPrice, setTargetPrice] = useState("") const { setPriceAlert, priceAlerts } = useStore() const { toast } = useToast() const existingAlert = priceAlerts.find((alert) => alert.productId === product.id) const handleSetAlert = () => { const price = Number(targetPrice) if (price <= 0 || isNaN(price)) { toast({ title: "Invalid price", description: "Please enter a valid price greater than $0", variant: "destructive", }) return } if (price >= product.price) { toast({ title: "Target price too high", description: `Target price should be below the current price of $${product.price.toFixed(2)}`, variant: "destructive", }) return } setPriceAlert(product.id, product.name, price) toast({ title: "Price alert set!", description: `You'll be notified when ${product.name} drops below $${price}`, }) setOpen(false) setTargetPrice("") } return ( ) } [V0_FILE]typescriptreact:file="components/mission-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { MapPin, Languages, Zap, MoreVertical, Bell, Pause, Play, Trash, CheckCircle, Sparkles, } from "@/components/icons" import { useStore, type Mission } from "@/lib/store-context" export function MissionCard({ mission }: { mission: Mission }) { const { toggleMissionStatus, setSelectedMissionId, selectedMissionId, deleteMission, completeMission } = useStore() const statusColors = { active: "bg-accent text-accent-foreground", monitoring: "bg-chart-1 text-white", paused: "bg-muted text-muted-foreground", completed: "bg-green-600 text-white", } const isSelected = selectedMissionId === mission.id const isCompleted = mission.status === "completed" const budgetUsage = mission.budget > 0 ? (mission.spent / mission.budget) * 100 : 0 const isOverBudget = budgetUsage > 100 return (

{mission.title} {mission.status} {mission.autoPurchase?.enabled && ( Auto-Buy )}

{mission.description}

{!isCompleted && ( completeMission(mission.id)}> Mark as Complete deleteMission(mission.id)} > Delete Mission )}

Mission Progress {mission.progress}%

{mission.budget > 0 && (

Budget Usage ${mission.spent} / ${mission.budget}

div]:bg-destructive" : ""}`} /> {isOverBudget && (

Over budget by ${mission.spent - mission.budget}

)} {budgetUsage > 80 && budgetUsage <= 100 && (

Approaching budget limit

)}

{mission.itemsFound}

Items Found

${mission.budget}

Budget (CAD)

{mission.preferences.province} {mission.preferences.language} {mission.preferences.primeOnly && ( Prime Only )} {mission.priceTracking && ( Price tracking enabled )}

{isCompleted ? `Completed ${mission.completedDate}` : `Updated ${mission.lastUpdate}`} {!isCompleted && (

)}

) } [V0_FILE]typescriptreact:file="components/pending-purchases.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Clock, X, CheckCircle, AlertTriangle } from "@/components/icons" import { useStore } from "@/lib/store-context" import Image from "next/image" export function PendingPurchases() { const { pendingPurchases, cancelPendingPurchase, approvePendingPurchase, addPendingPurchase, missions } = useStore() const simulateAgentFind = () => { const activeMission = missions.find((m) => m.status === "active" && m.autoPurchase?.enabled) if (!activeMission) { alert("Please create a mission with auto-purchase enabled first!") return } const demoProduct = { id: `demo-${Date.now()}`, name: "Columbia Women's Heavenly Long Hooded Jacket", price: 149.99, originalPrice: 199.99, rating: 4.6, reviews: 1203, image: "/winter-jacket.png", prime: true, shipping: "FREE delivery", inStock: true, canadianSeller: true, missionId: activeMission.id, } addPendingPurchase( activeMission.id, demoProduct, "Matches all criteria: Prime eligible, 4.6★ rating, within budget ($149.99 < $200 max)", ) } return (

Pending Auto-Purchases

{pendingPurchases.length === 0 && ( )}

{pendingPurchases.length === 0 ? "No pending purchases. The agent will notify you when it finds matching items." : "Review and approve or cancel these purchases within 30 minutes"} {pendingPurchases.length > 0 && ( {pendingPurchases.map((pending) => (

{pending.product.name}

Mission: {pending.missionTitle}

${pending.product.price} ⭐ {pending.product.rating} {pending.product.prime && Prime}

Review within 30 minutes

{pending.reason}

))} )} ) } [V0_FILE]typescriptreact:file="components/icons.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export function Plus({ className }: { className?: string }) { return ( ) } export function Sparkles({ className }: { className?: string }) { return ( ) } export function Settings({ className }: { className?: string }) { return ( ) } export function User({ className }: { className?: string }) { return ( ) } export function MapPin({ className }: { className?: string }) { return ( ) } export function Languages({ className }: { className?: string }) { return ( ) } export function Zap({ className }: { className?: string }) { return ( ) } export function MoreVertical({ className }: { className?: string }) { return ( ) } export function TrendingDown({ className }: { className?: string }) { return ( ) } export function Bell({ className }: { className?: string }) { return ( ) } export function ShoppingCart({ className }: { className?: string }) { return ( ) } export function Star({ className }: { className?: string }) { return ( ) } export function Truck({ className }: { className?: string }) { return ( ) } export function AlertCircle({ className }: { className?: string }) { return ( ) } export function Pause({ className }: { className?: string }) { return ( ) } export function Play({ className }: { className?: string }) { return ( ) } export function Trash({ className }: { className?: string }) { return ( ) } export function Minus({ className }: { className?: string }) { return ( ) } export function CheckCircle({ className }: { className?: string }) { return ( ) } export function TrendingUp({ className }: { className?: string }) { return ( ) } export function AlertTriangle({ className }: { className?: string }) { return ( ) } export function Package({ className }: { className?: string }) { return ( ) } export function Clock({ className }: { className?: string }) { return ( ) } export function X({ className }: { className?: string }) { return ( ) } export function Bot({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/product-recommendations.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ShoppingCart, Star, Truck, AlertCircle, Zap, TrendingDown, Bell } from "@/components/icons" import { useStore, type Product } from "@/lib/store-context" import { useEffect, useState } from "react" import { useToast } from "@/hooks/use-toast" import { SetPriceAlertDialog } from "./set-price-alert-dialog" const products: Product[] = [ { id: "1", name: "Canada Goose Expedition Parka", price: 1295.0, originalPrice: 1495.0, rating: 4.8, reviews: 342, image: "/winter-parka.png", prime: true, shipping: "Free shipping to ON", inStock: true, canadianSeller: true, }, { id: "2", name: "Sorel Caribou Winter Boots", price: 189.99, rating: 4.6, reviews: 1203, image: "/cozy-winter-boots.png", prime: true, shipping: "Arrives by Friday", inStock: true, canadianSeller: false, }, { id: "3", name: "Arc'teryx Beta AR Jacket", price: 649.0, rating: 4.9, reviews: 567, image: "/winter-jacket.png", prime: false, shipping: "Ships from BC", inStock: true, canadianSeller: true, }, ] export function ProductRecommendations({ missionId }: { missionId: string }) { const { addToCart, missions, priceAlerts } = useStore() const [isUpdating, setIsUpdating] = useState(false) const [prevMissionId, setPrevMissionId] = useState(missionId) const { toast } = useToast() const [addingToCart, setAddingToCart] = useState(null) const currentMission = missions.find((m) => m.id === missionId) const priceTrackingEnabled = currentMission?.priceTracking || false useEffect(() => { if (missionId !== prevMissionId) { console.log("[v0] Mission changed from", prevMissionId, "to", missionId) setIsUpdating(true) setPrevMissionId(missionId) const resultsSection = document.getElementById("results-section") if (resultsSection) { resultsSection.scrollIntoView({ behavior: "smooth", block: "nearest" }) } setTimeout(() => setIsUpdating(false), 600) } }, [missionId, prevMissionId]) return (

Top Picks

{currentMission &&

For: {currentMission.title}

}

AI Selected

{products.map((product, index) => { const hasAlert = priceAlerts.some((alert) => alert.productId === product.id) return (

{index === 1 && ( Lightning Deal )}

{product.name}

{product.rating} ({product.reviews})

${product.price.toFixed(2)} {product.originalPrice && ( <> ${product.originalPrice.toFixed(2)} {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% off )}

{product.prime && ( Prime )} {product.canadianSeller && ( 🍁 CA Seller )}

{product.shipping}

{priceTrackingEnabled && ( )}

) })}

) } [V0_FILE]typescriptreact:file="lib/store-context.tsx" isEdit="true" isQuickEdit="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" export interface Mission { id: string title: string description: string status: "active" | "monitoring" | "paused" | "completed" progress: number itemsFound: number budget: number spent: number priceTracking: boolean autoPurchase?: { enabled: boolean maxPricePerItem: number minRating: number minReviews: number requirePrime: boolean dailyLimit: number } preferences: { province: string language: string primeOnly: boolean } lastUpdate: string completedDate?: string } export interface Product { id: string name: string price: number originalPrice?: number rating: number reviews: number image: string prime: boolean shipping: string inStock: boolean canadianSeller: boolean missionId?: string } export interface CartItem extends Product { quantity: number } export interface Order { id: string orderNumber: string orderDate: string total: number shipTo: string deliveryStatus: string deliveryDate?: string items: { id: string name: string image: string quantity: number price: number }[] missionId?: string // Updated comment from ShopAgent to ShopMate missionTitle?: string purchaseType?: "manual" | "ai_assisted" | "auto_purchase" } interface StoreContextType { missions: Mission[] cart: CartItem[] selectedMissionId: string | null orders: Order[] notifications: Notification[] priceAlerts: PriceAlert[] suggestedMissions: SuggestedMission[] pendingPurchases: PendingPurchase[] addMission: (mission: Omit) => void toggleMissionStatus: (id: string) => void deleteMission: (id: string) => void completeMission: (id: string) => void addToCart: (product: Product) => void removeFromCart: (productId: string) => void updateQuantity: (productId: string, quantity: number) => void clearCart: () => void setSelectedMissionId: (id: string | null) => void placeOrder: (missionId?: string, purchaseType?: "manual" | "ai_assisted" | "auto_purchase") => void markNotificationRead: (id: string) => void dismissNotification: (id: string) => void setPriceAlert: (productId: string, productName: string, targetPrice: number) => void createMissionFromSuggestion: (suggestion: SuggestedMission) => void cancelPendingPurchase: (id: string) => void approvePendingPurchase: (id: string) => void addPendingPurchase: (missionId: string, product: Product, reason: string) => void } export interface PriceHistory { date: string price: number } export interface PriceAlert { productId: string productName: string targetPrice: number currentPrice: number priceHistory: PriceHistory[] } export interface Notification { id: string type: "price_drop" | "deal_alert" | "mission_suggestion" title: string message: string timestamp: string read: boolean productId?: string missionId?: string actionLabel?: string } export interface SuggestedMission { id: string title: string description: string reason: string icon: string budget: number filters: { primeOnly: boolean minRating: number canadianSeller: boolean } } export interface PendingPurchase { id: string missionId: string missionTitle: string product: Product scheduledTime: string expiresAt: string reason: string } const initialMissions: Mission[] = [ { id: "1", title: "Winter Essentials 2025", description: "Heavy-duty winter gear for Toronto winters", status: "active", progress: 65, itemsFound: 12, budget: 500, spent: 287, priceTracking: true, preferences: { province: "Ontario", language: "English", primeOnly: true, }, lastUpdate: "2 hours ago", }, { id: "2", title: "Gift Finder for Mom", description: "Thoughtful gifts for Mother's Day", status: "active", progress: 40, itemsFound: 8, budget: 200, spent: 89, priceTracking: false, preferences: { province: "Quebec", language: "Bilingual", primeOnly: false, }, lastUpdate: "5 hours ago", }, { id: "3", title: "Camping Trip Planner", description: "Complete camping setup for Banff trip", status: "monitoring", progress: 85, itemsFound: 24, budget: 800, spent: 645, priceTracking: true, preferences: { province: "Alberta", language: "English", primeOnly: true, }, lastUpdate: "1 day ago", }, { id: "4", title: "Home Office Setup", description: "Ergonomic desk, chair, and accessories", status: "completed", progress: 100, itemsFound: 15, budget: 1200, spent: 1150, priceTracking: false, preferences: { province: "Ontario", language: "English", primeOnly: true, }, lastUpdate: "3 days ago", completedDate: "Jan 4, 2025", }, { id: "5", title: "Summer Wardrobe Refresh", description: "Casual summer clothing and accessories", status: "completed", progress: 100, itemsFound: 22, budget: 400, spent: 385, priceTracking: false, preferences: { province: "British Columbia", language: "English", primeOnly: false, }, lastUpdate: "1 week ago", completedDate: "Dec 30, 2024", }, ] const initialOrders: Order[] = [ { id: "3", orderNumber: "702-9876543-2109876", orderDate: "January 10, 2025", total: 179.99, shipTo: "Saurav Sharma", deliveryStatus: "Order placed - Preparing for shipment", items: [ { id: "sorel-boots-1", name: "Sorel Caribou Winter Boots - Waterproof Insulated Snow Boots", image: "/sorel-caribou-winter-boots-brown-waterproof.jpg", quantity: 1, price: 179.99, }, ], missionId: "fitness-wellness", missionTitle: "Fitness & Wellness", purchaseType: "auto_purchase", }, { id: "1", orderNumber: "702-5844753-1656268", orderDate: "October 1, 2025", total: 147.93, shipTo: "Saurav Sharma", deliveryStatus: "Delivered 2 October", deliveryDate: "Package was left near the front door or porch", items: [ { id: "1", name: "Sports Research Vegan Omega-3 Fish Oil Alternative from Algae Oil", image: "/omega-3-fish-oil.png", quantity: 1, price: 45.99, }, { id: "2", name: "Resveratrol 500mg Glutathione 200mg Quercetin 200mg Grape Seed Extract", image: "/resveratrol-supplement-bottle-blue.jpg", quantity: 1, price: 52.95, }, { id: "3", name: "Vegan Collagen Powder | NIYAMA Glow & Flow for Healthy Skin", image: "/collagen-powder-container-pink.jpg", quantity: 1, price: 48.99, }, ], purchaseType: "manual", }, { id: "2", orderNumber: "702-1234567-8901234", orderDate: "December 28, 2024", total: 324.5, shipTo: "Saurav Sharma", deliveryStatus: "Delivered 30 December", deliveryDate: "Package was delivered", items: [ { id: "4", name: "Ergonomic Office Chair with Lumbar Support", image: "/ergonomic-office-chair-black.jpg", quantity: 1, price: 299.99, }, { id: "5", name: "Wireless Mouse and Keyboard Combo", image: "/wireless-keyboard-mouse-combo.jpg", quantity: 1, price: 24.51, }, ], missionId: "4", missionTitle: "Home Office Setup", purchaseType: "ai_assisted", }, ] const initialNotifications: Notification[] = [ { id: "auto-purchase-complete", type: "deal_alert", title: "Auto-Purchase Completed ✓", message: "Sorel Caribou Winter Boots purchased for $179.99. Matches your Fitness & Wellness mission criteria.", timestamp: "30 minutes ago", read: false, productId: "sorel-boots-1", missionId: "fitness-wellness", actionLabel: "View Order", }, { id: "1", type: "price_drop", title: "Price Drop Alert!", message: "Canada Goose Expedition Parka dropped to $1,295 (was $1,495)", timestamp: "2 hours ago", read: false, productId: "1", actionLabel: "View Product", }, { id: "2", type: "deal_alert", title: "Lightning Deal Match!", message: "Sorel Caribou Winter Boots - 25% off for next 3 hours", timestamp: "5 hours ago", read: false, productId: "2", missionId: "1", actionLabel: "Shop Now", }, { id: "3", type: "mission_suggestion", title: "Spring Shopping Season", message: "Based on your history, you usually shop for camping gear in May", timestamp: "1 day ago", read: false, actionLabel: "Create Mission", }, ] const initialPriceAlerts: PriceAlert[] = [ { productId: "1", productName: "Canada Goose Expedition Parka", targetPrice: 1300, currentPrice: 1295, priceHistory: [ { date: "Jan 1", price: 1495 }, { date: "Jan 3", price: 1450 }, { date: "Jan 5", price: 1395 }, { date: "Jan 7", price: 1295 }, ], }, ] const initialSuggestedMissions: SuggestedMission[] = [ { id: "suggest-1", title: "Spring Camping Gear", description: "Get ready for camping season with essential outdoor equipment", reason: "You usually shop for camping gear in May", icon: "🏕️", budget: 600, filters: { primeOnly: true, minRating: 4.0, canadianSeller: false, }, }, { id: "suggest-2", title: "Summer Wardrobe 2025", description: "Refresh your summer clothing collection", reason: "Based on your previous Summer Wardrobe mission", icon: "👕", budget: 400, filters: { primeOnly: false, minRating: 4.0, canadianSeller: false, }, }, { id: "suggest-3", title: "Tech Upgrades", description: "Latest gadgets and electronics for your home office", reason: "Popular items matching your interests", icon: "💻", budget: 800, filters: { primeOnly: true, minRating: 4.5, canadianSeller: false, }, }, ] export function StoreProvider({ children }: { children: ReactNode }) { const [missions, setMissions] = useState(initialMissions) const [cart, setCart] = useState([]) const [selectedMissionId, setSelectedMissionId] = useState("1") const [orders, setOrders] = useState(initialOrders) const [notifications, setNotifications] = useState(initialNotifications) const [priceAlerts, setPriceAlertsState] = useState(initialPriceAlerts) const [suggestedMissions, setSuggestedMissions] = useState(initialSuggestedMissions) const [pendingPurchases, setPendingPurchases] = useState([]) const addMission = (mission: Omit) => { const newMission: Mission = { ...mission, id: Date.now().toString(), lastUpdate: "Just now", } setMissions((prev) => [newMission, ...prev]) } const toggleMissionStatus = (id: string) => { setMissions((prev) => prev.map((mission) => mission.id === id ? { ...mission, status: mission.status === "paused" ? "active" : "paused", lastUpdate: "Just now", } : mission, ), ) } const deleteMission = (id: string) => { setMissions((prev) => prev.filter((mission) => mission.id !== id)) if (selectedMissionId === id) { setSelectedMissionId(null) } } const completeMission = (id: string) => { setMissions((prev) => prev.map((mission) => mission.id === id ? { ...mission, status: "completed" as const, progress: 100, lastUpdate: "Just now", completedDate: new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }), } : mission, ), ) } const addToCart = (product: Product) => { console.log("[v0] Adding to cart:", product) setCart((prev) => { const existing = prev.find((item) => item.id === product.id) if (existing) { console.log("[v0] Product already in cart, increasing quantity") return prev.map((item) => (item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item)) } console.log("[v0] Adding new product to cart") return [...prev, { ...product, quantity: 1 }] }) } const removeFromCart = (productId: string) => { setCart((prev) => prev.filter((item) => item.id !== productId)) } const updateQuantity = (productId: string, quantity: number) => { if (quantity <= 0) { removeFromCart(productId) return } setCart((prev) => prev.map((item) => (item.id === productId ? { ...item, quantity } : item))) } const clearCart = () => { setCart([]) } const placeOrder = (missionId?: string, purchaseType: "manual" | "ai_assisted" | "auto_purchase" = "manual") => { if (cart.length === 0) return const mission = missionId ? missions.find((m) => m.id === missionId) : null const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0) const newOrder: Order = { id: Date.now().toString(), orderNumber: `702-${Math.random().toString().slice(2, 9)}-${Math.random().toString().slice(2, 9)}`, orderDate: new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }), total, shipTo: "Saurav Sharma", deliveryStatus: "Order placed", items: cart.map((item) => ({ id: item.id, name: item.name, image: item.image, quantity: item.quantity, price: item.price, })), missionId: mission?.id, missionTitle: mission?.title, purchaseType, } setOrders((prev) => [newOrder, ...prev]) clearCart() } const markNotificationRead = (id: string) => { setNotifications((prev) => prev.map((notif) => (notif.id === id ? { ...notif, read: true } : notif))) } const dismissNotification = (id: string) => { setNotifications((prev) => prev.filter((notif) => notif.id !== id)) } const setPriceAlert = (productId: string, productName: string, targetPrice: number) => { const newAlert: PriceAlert = { productId, productName, targetPrice, currentPrice: 0, // Would be fetched from API priceHistory: [], } setPriceAlertsState((prev) => [...prev, newAlert]) // Create notification const notification: Notification = { id: Date.now().toString(), type: "price_drop", title: "Price Alert Set", message: `You'll be notified when ${productName} drops below $${targetPrice}`, timestamp: "Just now", read: false, productId, } setNotifications((prev) => [notification, ...prev]) } const createMissionFromSuggestion = (suggestion: SuggestedMission) => { const newMission: Mission = { id: Date.now().toString(), title: suggestion.title, description: suggestion.description, status: "active", progress: 0, itemsFound: 0, budget: suggestion.budget, spent: 0, // Added priceTracking to new missions priceTracking: suggestion.filters.primeOnly, preferences: { province: "Ontario", language: "English", primeOnly: suggestion.filters.primeOnly, }, lastUpdate: "Just now", } setMissions((prev) => [newMission, ...prev]) setSuggestedMissions((prev) => prev.filter((s) => s.id !== suggestion.id)) } const addPendingPurchase = (missionId: string, product: Product, reason: string) => { const mission = missions.find((m) => m.id === missionId) if (!mission) return const scheduledTime = new Date() const expiresAt = new Date(scheduledTime.getTime() + 30 * 60 * 1000) // 30 minutes from now const newPending: PendingPurchase = { id: Date.now().toString(), missionId, missionTitle: mission.title, product, scheduledTime: scheduledTime.toISOString(), expiresAt: expiresAt.toISOString(), reason, } setPendingPurchases((prev) => [...prev, newPending]) const notification: Notification = { id: Date.now().toString(), type: "deal_alert", title: "Auto-Purchase Pending", message: `ShopMate found ${product.name} matching your criteria. Review within 30 minutes.`, timestamp: "Just now", read: false, productId: product.id, missionId, actionLabel: "Review Now", } setNotifications((prev) => [notification, ...prev]) } const cancelPendingPurchase = (id: string) => { setPendingPurchases((prev) => prev.filter((p) => p.id !== id)) const notification: Notification = { id: Date.now().toString(), type: "deal_alert", title: "Auto-Purchase Cancelled", message: "You've successfully cancelled a pending auto-purchase. The item will not be ordered.", timestamp: "Just now", read: false, } setNotifications((prev) => [notification, ...prev]) } const approvePendingPurchase = (id: string) => { const pending = pendingPurchases.find((p) => p.id === id) if (!pending) return // Add to cart and place order addToCart(pending.product) // Create order immediately const mission = missions.find((m) => m.id === pending.missionId) const newOrder: Order = { id: Date.now().toString(), orderNumber: `702-${Math.random().toString().slice(2, 9)}-${Math.random().toString().slice(2, 9)}`, orderDate: new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }), total: pending.product.price, shipTo: "Saurav Sharma", deliveryStatus: "Order placed", items: [ { id: pending.product.id, name: pending.product.name, image: pending.product.image, quantity: 1, price: pending.product.price, }, ], missionId: mission?.id, missionTitle: mission?.title, purchaseType: "auto_purchase", } setOrders((prev) => [newOrder, ...prev]) setPendingPurchases((prev) => prev.filter((p) => p.id !== id)) // Clear the item from cart after order setTimeout(() => { removeFromCart(pending.product.id) }, 100) const notification: Notification = { id: Date.now().toString(), type: "deal_alert", title: "Auto-Purchase Completed ✓", message: `Order placed for ${pending.product.name} ($${pending.product.price}). Check your orders for details.`, timestamp: "Just now", read: false, productId: pending.product.id, missionId: pending.missionId, actionLabel: "View Order", } setNotifications((prev) => [notification, ...prev]) } return ( {children} ) } export function useStore() { const context = useContext(StoreContext) if (!context) { throw new Error("useStore must be used within StoreProvider") } return context } const StoreContext = createContext(undefined) [V0_FILE]jpg:file="public/sorel-caribou-winter-boots-brown-waterproof.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sorel-caribou-winter-boots-brown-waterproof-RrUaLtw5ktj0Wx9vTTZ2NWBVmiySAK.jpg"

Mission Budget Impact

Smart Optimizations

What the agent will do:

Order Completed!

Prime Big Deal Days is here!

Introducing ShopMate - Your AI Shopping Assistant

Deals you might like in Beauty & Personal Care

Keep shopping for

Deals you might like in Fashion

Deals inspired by your recent history

Your Orders

{item.name}

Suggested Missions

Your Shopping Missions

{template.title}

Purchase Rules

Mission Summary

{product.name}

{pending.product.name}

Top Picks

{product.name}

About

Tags

Share

About

Tags

Share

More from saurvsh-6662

More Templates Like This

About

Tags

Share

About

Tags

Share

More from saurvsh-6662

More Templates Like This